<mat-card>
  <mat-card-title>
    <h2 align="center">Configuration</h2>
  </mat-card-title>
  <div flexLayout="column" style="padding-bottom: 2em;">
    <div class="form-group" style="padding-bottom: 0.5em">
      <h2>Site settings</h2>
      <mat-form-field class="example-full-width" style="width: 100%">
        <input matInput name="siteUrl" [(ngModel)]="config.SiteUrl" />
        <mat-hint align="start">e.g https://1backend.com</mat-hint>
      </mat-form-field>
    </div>

    <div class="form-group">
      <mat-form-field class="example-full-width" style="width: 100%">
        <input matInput name="stripeKey" [(ngModel)]="config.StripeKey" />
        <mat-hint align="start">Stripe API key</mat-hint>
      </mat-form-field>
    </div>

    <div class="form-group">
      <mat-form-field class="example-full-width" style="width: 100%">
        <input name="path" matInput [(ngModel)]="config.SendGridKey" />
        <mat-hint align="start">SendGridKey</mat-hint>
      </mat-form-field>
    </div>

    <div class="form-group">
      <mat-form-field class="example-full-width" style="width: 100%">
        <input matInput name="sendGrid" [(ngModel)]="config.Path" />
        <mat-hint align="start">Absolute path to folder containing files</mat-hint>
      </mat-form-field>
    </div>

    <div>
      <div class="form-group">
        <h2 style="padding-bottom: 1em">API generation</h2>
      </div>
      <div>
        <div style="padding-bottom: 1em;">
          <mat-radio-group [(ngModel)]="config.ApiGeneration.Enabled">
            <mat-radio-button color="primary" [value]="true" style="padding-right: 1em;">Enable</mat-radio-button>
            <mat-radio-button color="primary" [value]="false">Disable</mat-radio-button>
          </mat-radio-group>
        </div>
        <div style="padding-bottom: 1em;">
          <mat-hint align="start">Enable or disable API genaration</mat-hint>
        </div>
      </div>
    </div>

    <ng-container *ngIf="config.ApiGeneration.Enabled">
      <mat-form-field class="example-full-width" style="width: 100%">
        <input matInput name="gitOrg" [(ngModel)]="config.ApiGeneration.GithubOrganisation" />
        <mat-hint align="start">GitHub organization</mat-hint>
      </mat-form-field>

      <div class="form-group">
        <mat-form-field class="example-full-width" style="width: 100%">
          <input matInput name="gitUser" [(ngModel)]="config.ApiGeneration.GithubUser" />
          <mat-hint align="start">GitHub user</mat-hint>
        </mat-form-field>
      </div>

      <div class="form-group">
        <mat-form-field class="example-full-width" style="width: 100%">
          <input matInput name="gitToken" [(ngModel)]="config.ApiGeneration.GithubPersonalToken" />
          <mat-hint align="start">GitHub token</mat-hint>
        </mat-form-field>
      </div>

    </ng-container>
    <div class="form-group">
      <h2 style="padding-bottom: 1em">Npm publication</h2>
      <div style="padding-bottom: 1em;">
        <mat-radio-group [(ngModel)]="config.NpmPublication.Enabled">
          <mat-radio-button color="primary" [value]="true" style="padding-right: 1em;">Enable</mat-radio-button>
          <mat-radio-button color="primary" [value]="false">Disable</mat-radio-button>
        </mat-radio-group>
      </div>
    </div>
    <div style="padding-bottom: 1em;">
      <mat-hint align="start">Enable or disable Npm publication</mat-hint>
    </div>

    <ng-container *ngIf="config.NpmPublication.Enabled">
      <mat-form-field class="example-full-width" style="width: 100%">
        <input matInput name="npmOrg" [(ngModel)]="config.NpmPublication.NpmOrganisation" />
        <mat-hint align="start">Npm organization</mat-hint>
      </mat-form-field>

      <div class="form-group" *ngIf="config.NpmPublication.Enabled">
        <mat-form-field class="example-full-width" style="width: 100%">
          <input matInput name="npmToken" [(ngModel)]="config.NpmPublication.NpmToken" />
          <mat-hint align="start">Npm token</mat-hint>
        </mat-form-field>
      </div>

    </ng-container>
    <div class="form-group">
      <h2 style="padding-bottom: 1em">Sitemap</h2>
      <div style="padding-bottom: 1em;">
        <mat-radio-group [(ngModel)]="config.Sitemap.Enabled">
          <mat-radio-button color="primary" [value]="true" style="padding-right: 1em;">Enable</mat-radio-button>
          <mat-radio-button color="primary" [value]="false">Disable</mat-radio-button>
        </mat-radio-group>
      </div>
    </div>

    <div>
      <mat-hint align="start">Enable or disable Sitemap generation</mat-hint>
    </div>
  </div>
  <ng-container *ngIf="config.Sitemap.Enabled">
    <div class="form-group">
      <mat-form-field class="example-full-width" style="width: 100%">
        <input matInput name="sitePath" [(ngModel)]="config.Sitemap.Path" />
        <mat-hint align="start">Defaults to /var/sitemap.xml.gz</mat-hint>
      </mat-form-field>
    </div>
  </ng-container>
  <mat-card-actions>
    <div align="center" style="padding-bottom: 1em;">
      <button mat-raised-button (click)="saveConfig()" color="accent">Save</button>
    </div>
  </mat-card-actions>
</mat-card>